<template>
  <view class="history-meet-schedule">
    <view class="history-meet-schedule-con">
      <view class="history-search-title">
        <view class="history-search-title-date">
          <view
            class="title-date"
            @click="openSwitch('isVisible')"
          >
            <text>时间筛选<i class="iconfont icon-daosanjiao"></i></text>
            <!--  -->
            <text>日期范围：{{ state.date[0].substring(5, 10) }} 至 {{ state.date[1].substring(5, 10) }}</text>
          </view>
        </view>
        <view class="history-search-title-search">
          <nut-searchbar
            v-model="promoter"
            placeholder="发起人"
            @change="searchbarInput"
          >
            <template v-slot:leftin>
              <i
                class="iconfont icon-sousuo"
                style="font-size: 20px"
              ></i>
            </template>
          </nut-searchbar>
        </view>
      </view>
      <view class="history-meet-schedule-list">
        <view
          class="history-list-item"
          v-for="(meetings, date) in meetingData"
          :key="date"
        >
          <view class="history-list-item-title">
            <view class="history-list-item-left">
              <text>{{ date.substring(5, 10) }}</text>
              <text>{{ getWeekday(date) }}</text>
            </view>
            <view class="history-search-list-item-right">
              <text>{{ date.substring(0, 4) }}年</text>
            </view>
          </view>
          <view
            class="history-list-item-con"
            v-for="(meeting, index) in meetings"
            :key="index"
          >
            <view class="item-con-box">
              <view class="item-con-time-adress">
                <text>{{ meeting.beginTime.substring(11, 16) }}-{{ meeting.endTime.substring(11, 16) }}</text>
                <view class="item-con-adress">{{ meeting.position ? meeting.position : meeting.roomName }}</view>
              </view>
              <view class="item-con-title">
                <text>{{ meeting.subject }}</text>
              </view>
              <view class="item-con-people">
                <view class="item-con-people-left">
                  <img
                    :src="meeting.avatar"
                    alt=""
                  />
                  <text>发起人：{{ meeting.promoterName }} | {{ meeting.number }}人参与</text>
                </view>
                <view class="item-con-people-right">
                  <i class="iconfont icon-sangediandian"></i>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- <nut-popup
      position="bottom"
      round
      v-model:visible="show"
    > -->
    <nut-calendar
      v-model:visible="state.isVisible"
      :default-value="state.date"
      type="range"
      start-date="2020-01-01"
      @close="closeSwitch('isVisible')"
      @choose="setChooseValue"
    >
      <template v-slot:btn>
        <div class="wrapper">
          <div class="d_div">
            <span
              class="d_btn"
              @click="clickBtn"
              >近三天</span
            >
          </div>
          <div class="d_div">
            <span
              class="d_btn"
              @click="clickBtn1"
              >今日</span
            >
          </div>
          <div class="d_div">
            <span
              class="d_btn"
              @click="clickBtn2"
              >本周</span
            >
          </div>
          <div class="d_div">
            <span
              class="d_btn"
              @click="clickBtn3"
              >当月</span
            >
          </div>
        </div>
      </template>
    </nut-calendar>
  </view>
</template>

<script setup lang="ts">
import { onMounted, ref, reactive } from "vue";
import Taro from "@tarojs/taro";
import { getMeetingList, getMeetingListHistory } from "@/api/index";
import { getCurrentWeekRange } from "@/utils/utils";
onMounted(() => {
  let myTitle = "历史日程"; //自定义标题
  // if (appInfoStore.meetingType == 1) {
  //   myTitle = '我的日程';
  // } else if (appInfoStore.meetingType == 2) {
  //   myTitle = '我的会议';
  // }
  Taro.setNavigationBarTitle({
    title: myTitle,
  });
  handleGetMeetingListHistory();
});
const promoter = ref("");
const meetingData = ref({});
const show = ref(false);
const data = ref({});
const desc = ref("");
const { startDate, endDate } = getCurrentWeekRange();
console.log(startDate, endDate, "startDate, endDate");

const state = reactive({
  dateWeek: "",
  date: [startDate, endDate], //默认当前周区间
  isVisible: false,
  date5: [],
});
function getWeekday(dateStr) {
  const date = new Date(dateStr);
  const weekdays = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];
  return weekdays[date.getDay()];
}
const getNumTwoBit = function (n: number): string {
  n = Number(n);
  return (n > 9 ? "" : "0") + n;
};
const date2Str = function (date: Date, split?: string): string {
  split = split || "-";
  const y = date.getFullYear();
  const m = getNumTwoBit(date.getMonth() + 1);
  const d = getNumTwoBit(date.getDate());
  return [y, m, d].join(split);
};
const getDay = function (i: number): string {
  i = i || 0;
  let date = new Date();
  const diff = i * (1000 * 60 * 60 * 24);
  date = new Date(date.getTime() + diff);
  return date2Str(date);
};
const isLeapYear = function (y: number): boolean {
  return (y % 4 == 0 && y % 100 != 0) || y % 400 == 0;
};
const getMonthDays = function (year: string, month: string): number {
  if (/^0/.test(month)) {
    month = month.split("")[1];
  }
  return ([0, 31, isLeapYear(Number(year)) ? 29 : 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31] as number[])[
    month as any
  ];
};
const openSwitch = param => {
  console.log((state[`${param}`] = true));

  state[`${param}`] = true;
};
const closeSwitch = param => {
  state[`${param}`] = false;
};
const setChooseValue = param => {
  console.log(param, "param");
  state.date = [param[0][3], param[1][3]];
  handleGetMeetingListHistory(promoter.value, param[0][3], param[1][3]);
  console.log(state.date, "state.date");
};
const clickBtn = (param: string) => {
  let date = [date2Str(new Date()), getDay(2)];
  state.date = date;
};
// 今日
const clickBtn1 = (param: string) => {
  let date = new Date();
  console.log(date2Str(date), "date2Str(date)");

  state.date = [date2Str(date), date2Str(date)];
};
// 本周
const clickBtn2 = (param: string) => {
  state.date = [startDate, endDate];
};
const clickBtn3 = (param: string) => {
  let date = new Date();
  let year = date.getFullYear();
  let month: any = date.getMonth() + 1;
  month = month < 10 ? "0" + month : month + "";
  let yearMonth = `${year}-${month}`;
  let currMonthDays = getMonthDays(year + "", month + "");
  state.date = [`${yearMonth}-01`, `${yearMonth}-${currMonthDays}`];
};
// 获取列表
const handleGetMeetingListHistory = async (promoter: string | undefined, date1?: string, date2?: string) => {
  // meetingState: 2,
  await getMeetingListHistory({
    promoterName: promoter ? promoter : "",
    initiate: date1 ? date1 : "",
    initiateEnd: date2 ? date2 : "",
  }).then((res: any) => {
    meetingData.value = res.data;
    console.log(meetingData.value, "meetingData");
  });
};
// 查询
const searchbarInput = () => {
  handleGetMeetingListHistory(promoter.value);
};
// 获取列表
// const handleGetMeetingList = async (promoter: string | undefined) => {
//   // meetingState: 2,
//   const res = await getMeetingList({ promoter: promoter });
//   meetingData.value = res.rows;
//   console.log(meetingData.value, "meetingData");
// };
const confirm = ({ selectedValue, selectedOptions }) => {
  desc.value = selectedValue.join(",");
  show.value = false;
};
const change = ({ selectedValue, selectedOptions }) => {
  console.log(selectedValue);
};
</script>

<style lang="less">
@import "./index.less";
// @import url("../../../assets/css/index.css");
@import "@/assets/css/index.less";
.nut-calendar__confirm {
  background: #1e74fd;
}
.wrapper {
  display: flex;
  padding: 0 80rpx;
  justify-content: center;
  justify-content: space-between;
}
.d_div {
  margin: 0 10rpx;
  .d_btn {
    color: #101010;
    padding: 16rpx 16rpx;
    border-radius: 8rpx;
    background: #eef4ff;
    border-radius: 36rpx;
    display: inline-block;
    height: 32rpx;
    font-weight: 600;
    font-size: 28rpx;
  }
}
</style>
